<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <f:view contentType="text/html">
        <h:head>
            <f:facet name="first">
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
                <title>OM Salon System</title>
                <link type="text/css" rel="stylesheet" href="css/estilo.css" />
                <script type="text/javascript" src="javax.faces.resource/jquery/jquery.js?ln=primefaces"></script>
                <script type="text/javascript" src="javax.faces.resource/primefaces.js?ln=primefaces"></script>
                <script type="text/javascript">
                    $(document).ready(function() {
                        PrimeFaces.locales['pt_BR'] = {
                            closeText: 'Fechar',
                            prevText: 'Anterior',
                            nextText: 'Próximo',
                            currentText: 'Hoje',
                            monthNames: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
                            monthNamesShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
                            dayNames: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
                            dayNamesShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'],
                            dayNamesMin: ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'],
                            weekHeader: 'Semana',
                            firstDay: 0,
                            isRTL: false,
                            showMonthAfterYear: false,
                            yearSuffix: '',
                            timeOnlyTitle: 'Só Horas',
                            timeText: 'Tempo',
                            hourText: 'Hora',
                            minuteText: 'Minuto',
                            secondText: 'Segundo',
                            ampm: false,
                            month: 'Mês',
                            week: 'Semana',
                            day: 'Dia',
                            allDayText: 'Todo o Dia'
                        };
                    });
                </script>
            </f:facet>
        </h:head>

        <h:body>
            <h:form id="formAgenda">
                <p:growl id="messages" showDetail="true" />  
                <p:schedule locale="#{agendaController.ptBr}" view="agendaDay" minTime="7" maxTime="24" id="agenda" allDaySlot="false"
                            widgetVar="agenda" value="#{agendaController.eventModel}" >
                    <p:ajax event="dateSelect" listener="#{agendaController.onDateSelect}" update="eventDetails" oncomplete="eventDialog.show()" />  
                    <p:ajax event="eventMove" listener="#{agendaController.onEventMove}" update="eventDetails" />  
                    <p:ajax event="eventResize" listener="#{agendaController.onEventResize}" update="eventDetails"  />  
                    <p:ajax event="eventSelect" listener="#{agendaController.onEventSelect}" update="eventDetails" oncomplete="eventDialog.show()" />  
                </p:schedule>  

                <p:dialog widgetVar="eventDialog" header="Detalhes" showEffect="clip" hideEffect="clip">  
                    <h:panelGrid id="eventDetails" columns="2">  
                        <h:outputLabel for="cliente" value="Cliente:" />  
                        <p:inputText id="cliente" value="#{agendaController.event.title}" required="true"/>  
                        
                        <h:outputLabel for="Service" value="Serviço:" />  
                        <p:inputText id="Service" value="#{agendaController.event.service}" required="true"/>  

                        <h:outputLabel for="from" value="Inicio:" />  
                        <p:inputMask id="from" value="#{agendaController.event.startDate}" mask="99/99/9999 99:99">  
                            <f:convertDateTime pattern="dd/MM/yyyy HH:mm" timeZone="GMT-3"/>  
                        </p:inputMask>  

                        <h:outputLabel for="to" value="Fim:" />  
                        <p:inputMask id="to" value="#{agendaController.event.endDate}" mask="99/99/9999 99:99">  
                            <f:convertDateTime pattern="dd/MM/yyyy HH:mm" />  
                        </p:inputMask>  

                        <p:commandButton type="reset" value="Reset" />  
                        <p:commandButton value="Save" actionListener="#{agendaController.addEvent}" oncomplete="agenda.update();eventDialog.hide();"/>  
                    </h:panelGrid>  
                </p:dialog>  
            </h:form>
        </h:body>
    </f:view>
</html>